<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="./js/jquery-1.7.2.min.js"></script>
</head>
<style>
.fontClass{
	font-size : 28px;
	font-weight : blod;
}

div.line{
height:5px;
border-top:2px solid black;
width:100%;
}

</style>
<script>
window. addEventListener ('message', function(event) { 
	//event.data获取传过来的数据
	if(event.data.type == "print"){
		printTest();
	}else if(event.data.type == "test"){
		generate(event.data.testData);
	}
});

function printTest(){
  window.print(); 
}

//判断计算题目是否重复
//只是字符串比较 1+2 和2+1 为false
var maxCacheCount = 40; //多少个以内不重复
var resultCache = [];
function isExist(testItem){
	var result = false;
	for(var i = 0;i<resultCache.length;i++){
		if(resultCache[i].str == testItem.str){
			console.log(testItem);
			result = true;
			break;
		}
	}
	
	if(!result){
		resultCache.push(testItem);
		if(resultCache.length>maxCacheCount){
			resultCache.unshift();
		}
	}
	
	return result;
}

//生成计算题目
function generate(options){
	$("#testList").empty();
	resultCache = [];
	
	//console.log(options);
	
	if(options.totalWeight >0){
		var result = [];
		var sumCount = options.total;
		
		var generatCount = 0;
		
		var itemNumberArray=[];
		jQuery.each(options.item,function(i,n){
			itemNumberArray.push(0);
		});
		
		
		while(sumCount >0 ){
			//在总的权重下面,得到一个随机数
			//通过随机数,得到当前需要整哪个计算
			
			var itemWeightArray = [];
			var calTime = 0;
			for(var i = 0 ; i< options.item.length;i++){
				calTime = Math.max(options.item[i].value,calTime);	
			}
			for(var i = 0 ; i<calTime;i++){
				for(var j = 0 ; j< options.item.length;j++){
					if(options.item[j].value>(i)){
						itemWeightArray.push(j);
					}
				}
			}
			
			//console.log(itemWeightArray);
			
			jQuery.each(itemWeightArray,function(i,n){
				var targetScript = options.item[n].method+"();";
				//console.log(targetScript);
				var testItem = eval(targetScript);
				while(!testItem  || (isExist(testItem) && generatCount<options.total*10)){
					testItem = eval(targetScript);
					generatCount++;
				}
				//判断是否重复
				//增加生成次数超过题目总数的十倍,说明选择的项目中,题目一定有重复,跳过isExist的判断,直接生成,否则会死循环
				//if(!isExist(testItem) || generatCount>options.total*10){
					result.push(testItem);
					sumCount --;	
					itemNumberArray[n] = itemNumberArray[n]+1;
				//}

			});
		}
		
		//console.log(itemNumberArray);
		
		//开始渲染题目表格
		var table = $("<table></table>").addClass("testTable").attr("width","100%");
		var colCount = 0;
		var lastTr;
		$.each(result,function(i,n){
			colCount = i % options.colNum;
			if(colCount == 0){
				lastTr = $("<tr></tr>").addClass("testTableRow");
				table.append(lastTr);
			}
			
			var col = showTestItem(n);
			var td = $("<td></td>");
			td.append(col);
			lastTr.append(td);
		});
		
		$("#testList").append(table);
		
		
	}
}

/**
*	生成单个的计算题目
*/
function showTestItem(formular){
	var testItem = $("<div></div>").addClass("testItem");
	if(formular.type == "he"){
		testItem.addClass("single");
		var top = $("<div></div>").addClass("top");
		if(formular.form.total){
			top.text(formular.form.total);
		}
		testItem.append(top);
		
		var second = $("<div></div>").addClass("second").attr("width","100%");
		second.append($("<div></div>").addClass("left"));
		second.append($("<div></div>").addClass("right"));
		testItem.append(second);
		
		var third = $("<div></div>").addClass("third").attr("width","100%");
		var thirdLeft = $("<div></div>").addClass("left");
		third.append(thirdLeft);
		if(formular.form.left){
			thirdLeft.text(formular.form.left);
		}
		var thirdRight = $("<div></div>").addClass("right");
		if(formular.form.right){
			thirdRight.text(formular.form.right);
		}
		third.append(thirdRight);
		testItem.append(third);
	}else if(formular.type == "mu" || formular.type == "mufan"){
		testItem.addClass("mu");
		if(formular.type == "mufan"){
			testItem.addClass("mufan");

			var leftAdd = $("<div></div>").addClass("top1");
			if(formular.form.left){
				leftAdd.text(formular.form.left);
			}
			testItem.append(leftAdd);
			testItem.append($("<div></div>").addClass("operator").text(formular.operator));

			var single =  $("<div></div>").addClass("single");
			var rightAdd = $("<div></div>").addClass("top");
			if(formular.form.left){
				rightAdd.text(formular.form.right);
			}
			single.append(rightAdd);

			var second = $("<div></div>").addClass("second").attr("width","100%");
			second.append($("<div></div>").addClass("left"));
			second.append($("<div></div>").addClass("right"));
			single.append(second);

			var third = $("<div></div>").addClass("third").attr("width","100%");
			var thirdLeft = $("<div></div>").addClass("left");
			if(formular.form.third.left){
				thirdLeft.text(formular.form.third.left);
			}
			third.append(thirdLeft);
			var thirdRight = $("<div></div>").addClass("right");
			if(formular.form.third.right){
				thirdRight.text(formular.form.third.right);
			}
			third.append(thirdRight);
			single.append(third);

			var bottom =  $("<div></div>").addClass("bottom");
			var middle =  $("<div></div>").addClass("middle");
			if(formular.form.middle){
				middle.text(formular.form.middle);
			}
			bottom.append(middle);
			single.append(bottom);

			testItem.append(single);
			testItem.append($("<div></div>").addClass("operator").text("="));
			testItem.append($("<div></div>").addClass("top1"));

		}else{
			var single =  $("<div></div>").addClass("single");
			var leftAdd = $("<div></div>").addClass("top");
			if(formular.form.left){
				leftAdd.text(formular.form.left);
			}
			single.append(leftAdd);

			var second = $("<div></div>").addClass("second").attr("width","100%");
			second.append($("<div></div>").addClass("left"));
			second.append($("<div></div>").addClass("right"));
			single.append(second);

			var third = $("<div></div>").addClass("third").attr("width","100%");
			var thirdLeft = $("<div></div>").addClass("left");
			if(formular.form.third.left){
				thirdLeft.text(formular.form.third.left);
			}
			third.append(thirdLeft);
			var thirdRight = $("<div></div>").addClass("right");
			if(formular.form.third.right){
				thirdRight.text(formular.form.third.right);
			}
			third.append(thirdRight);
			single.append(third);

			var bottom =  $("<div></div>").addClass("bottom");
			var middle =  $("<div></div>").addClass("middle");
			if(formular.form.middle){
				middle.text(formular.form.middle);
			}
			bottom.append(middle);
			single.append(bottom);

			testItem.append(single);
			testItem.append($("<div></div>").addClass("operator").text(formular.operator));
			var rightAdd = $("<div></div>").addClass("top1");
			if(formular.form.right){
				rightAdd.text(formular.form.right);
			}
			testItem.append(rightAdd);
			testItem.append($("<div></div>").addClass("operator").text("="));
			testItem.append($("<div></div>").addClass("top1"));
		}
		
	}
	return testItem;
}


//--------------------------------------计算方法
//10以内数的分
function innerTenFen(){
	var result = {};
	result.type="he";
	result.form={};
	result.form.total = 2+Math.round(Math.random() * 8);
	var flag = Math.round(Math.random() * 1000);
	if(flag % 2 == 0){
		result.form.left = 1+Math.round(Math.random() * (result.form.total-1));
	}else{
		result.form.right = 1+Math.round(Math.random() * (result.form.total-1));
	}
	
	return result;
}

//10以内数的和
function innerTenHe(){
	var result = {};
	result.type="he";
	result.form={};
	result.form.left = 1 + Math.round(Math.random() * 8);
	result.form.right = 1 + Math.round(Math.random() * (9-result.form.left));
	
	
	return result;
}

//10的分
function onTenFen(){
	var result = {};
	result.type="he";
	result.form={};
	result.form.total = 10;
	var flag = Math.round(Math.random() * 1000);
	if(flag % 2 == 0){
		result.form.left = 1+Math.round(Math.random() * (result.form.total-1));
	}else{
		result.form.right = 1+Math.round(Math.random() * (result.form.total-1));
	}
	
	return result;
}

//10的合
function onTenHe(){
	var result = {};
	result.type="he";
	result.form={};
	result.form.left = 1 + Math.round(Math.random() * 9);
	result.form.right = 10-result.form.left;

	return result;
}

//100内整10的分
function innerHundredFen(){
	var result = {};
	result.type="he";
	result.form={};
	result.form.total = 10+Math.round(Math.random() * 89);
	var flag = Math.round(Math.random() * 1000);
	var yu = result.form.total % 10;
	if(yu == 0){
		yu = (result.form.total / 10 -1 ) * 10;
	}
	if(flag % 2 == 0){
		result.form.left = yu;
	}else{
		result.form.right = yu;
	}
	
	return result;
}

//20内凑10加
function innerTwentyAdd()
{
	var result = {};

	var flag = Math.round(Math.random() * 1000);
	if(flag % 2 == 0){
		result.type = "mu";
	}else{
		result.type = "mufan";
	}

	result.form = {};

	var sum = 11+Math.round(Math.random() * 8);
	var geNum = sum % 10;
	result.form.left = geNum+Math.round(1+Math.random() * (8-geNum));
	result.form.right = sum - result.form.left;
	result.form.middle = 10;
	result.form.third = {};
	result.operator = "✚";
	return result;
}

//50以内凑10加
function innerFiftyAdd(){
	var result = {};

	var flag = Math.round(Math.random() * 1000);
	if(flag % 2 == 0){
		result.type = "mu";
	}else{
		result.type = "mufan";
	}

	result.form = {};

	var sum = 21+Math.round(Math.random() * 78);
	var geNum = sum % 10;

	if(flag % 2 == 0){
		result.form.right = geNum+Math.round(1+Math.random() * (8-geNum));
		result.form.left = sum - result.form.right;
	}else{
		
		result.form.left = geNum+Math.round(1+Math.random() * (8-geNum));
		result.form.right = sum - result.form.left;
	}

	
	result.form.third = {};
	if(flag % 2 == 0){
		result.form.third.left = parseInt(result.form.left/10)*10;
	}else{
		result.form.third.right = parseInt(result.form.right/10)*10;
	}
	result.operator = " ✚ ";
	return result;
}

//20以内借10减
function innerTwentyMinus(){
	var result = {};
	result.type = "mu";
	result.form = {};
	result.form.left = 11+Math.round(Math.random() * 8);
	var geNum = result.form.left % 10;
	result.form.right = geNum+Math.round(1+Math.random() * (8-geNum));

	result.form.third = {};
	result.form.third.right = 10;
	result.operator = " 一 ";
	return result;
}


//20内凑10加-无提示
function innerTwentyAddNo()
{
	var result = {};

	var flag = Math.round(Math.random() * 1000);
	if(flag % 2 == 0){
		result.type = "mu";
	}else{
		result.type = "mufan";
	}

	result.form = {};

	var sum = 11+Math.round(Math.random() * 8);
	var geNum = sum % 10;
	result.form.left = geNum+Math.round(1+Math.random() * (8-geNum));
	result.form.right = sum - result.form.left;
	// result.form.middle = 10;
	result.form.third = {};
	result.operator = "✚";
	return result;
}

//50以内凑10加--无提示
function innerFiftyAddNo(){
	var result = {};

	var flag = Math.round(Math.random() * 1000);
	if(flag % 2 == 0){
		result.type = "mu";
	}else{
		result.type = "mufan";
	}

	result.form = {};

	var sum = 21+Math.round(Math.random() * 78);
	var geNum = sum % 10;

	if(flag % 2 == 0){
		result.form.right = geNum+Math.round(1+Math.random() * (8-geNum));
		result.form.left = sum - result.form.right;
	}else{
		
		result.form.left = geNum+Math.round(1+Math.random() * (8-geNum));
		result.form.right = sum - result.form.left;
	}

	
	result.form.third = {};
	if(flag % 2 == 0){
		// result.form.third.left = parseInt(result.form.left/10)*10;
	}else{
		// result.form.third.right = parseInt(result.form.right/10)*10;
	}
	result.operator = " ✚ ";
	return result;
}

//20以内借10减--无提示
function innerTwentyMinusNo(){
	var result = {};
	result.type = "mu";
	result.form = {};
	result.form.left = 11+Math.round(Math.random() * 8);
	var geNum = result.form.left % 10;
	result.form.right = geNum+Math.round(1+Math.random() * (8-geNum));

	result.form.third = {};
	// result.form.third.right = 10;
	result.operator = " 一 ";
	return result;
}
</script>
<style>
body{overflow-x：hidden；overflow-y：auto；}

.testItem{
float:left;
margin-bottom:40px;
z-index: 1000;
}

.mu{
width:260px;
height:180px;
background:url(333.png) no-repeat;
background-size:100% 100%;
}

.mufan{
	background:url(444.png) no-repeat;
background-size:100% 100%;
}

.single{
width:120px;
height:80px;
display:inline-block;
}

.single .top{
width:40px;
height:25px;
margin:0 auto;
border:1px solid;
text-align:center;
}

.mu .top1{
width:40px;
height:25px;
display:inline-block;
border:1px solid;
vertical-align:top;
opacity:100;
filter:alpha(opacity=100);
background-color:rgba(255, 255, 255, 1);
text-align:center;
}

.mu .operator{
display:inline-block;
height:80px;
margin: 0 5px;
vertical-align:top;
}

.single .second{
height:25px;
}

.single .second .left{
width:30px;
height:25px;
display:inline-block;
margin-left:30px;
background:url(1.png) no-repeat;
background-size:100% 100%;
}

.single .second .right{
display:inline-block;
width:30px;
height:25px;
background:url(2.png) no-repeat;
background-size:100% 100%;
}

.single .third{
height:30px;

}

.single .third .left{
display:inline-block;
width:40px;
height:25px;
border:1px solid;
vertical-align:top;
text-align:center;
opacity:100;
filter:alpha(opacity=100);
background-color:rgba(255, 255, 255, 1);
}

.single .third .right{
display:inline-block;
width:40px;
height:25px;
margin-left:30px;
border:1px solid;
vertical-align:top;
text-align:center;
opacity:100;
filter:alpha(opacity=100);
background-color:rgba(255, 255, 255, 1);
}

.single .bottom{
	margin-top: 30px;
	height:30px;
	width: 250px;
}

.single .bottom .middle{

	width:40px;
	height:25px;
	margin:0 auto;
	border:1px solid;
	text-align:center;
	opacity:100;
filter:alpha(opacity=100);
background-color:rgba(255, 255, 255, 1);
}

.mufan .single .bottom{
	width: 120px;
}

.mufan .single .bottom .middle{
	margin-left: -30px;
}

</style>

<body>
<div id="testList"></div>


<!-- <div class="testList">
	<div class="testItem single">
		<div class="top">10</div>
		<div width="100%" class="second">
			<div class="left"></div>
			<div class="right"></div>
		</div>
		<div width="100%" class="third">
			<div class="left">10</div>
			<div class="right">10</div>
		</div>
	</div>

	<div class="testItem single" width="80">
		<div width="30" class="top"></div>
		<div width="100%" class="second">
			<div class="left"></div>
			<div class="right"></div>
		</div>
		<div width="100%" class="third">
			<div class="left"></div>
			<div class="right"></div>
		</div>
	</div>

	<div class="mu testItem">
		<div class=" single" width="80">
			<div width="30" class="top"></div>
			<div width="100%" class="second">
				<div class="left"></div>
				<div class="right"></div>
			</div>
			<div width="100%" class="third">
				<div class="left"></div>
				<div class="right"></div>
			</div>
			<div class="bottom">
				<div class="middle"></div>
			</div>
		</div>
		<div class="operator">+</div>
		<div width="30" class="top1"></div>
		<div class="operator">=</div>
		<div width="30" class="top1"></div>
	</div>

	<div class="mu testItem">
			<div class=" single" width="80">
				<div width="30" class="top"></div>
				<div width="100%" class="second">
					<div class="left"></div>
					<div class="right"></div>
				</div>
				<div width="100%" class="third">
					<div class="left"></div>
					<div class="right"></div>
				</div>
				<div class="bottom">
					<div class="middle"></div>
				</div>
			</div>
			<div class="operator">+</div>
			<div width="30" class="top1"></div>
			<div class="operator">=</div>
			<div width="30" class="top1"></div>
		</div>

		<div class="mu mufan testItem">
			
			<div width="30" class="top1"></div>	
			<div class="operator">+</div>
			<div class=" single" width="80">
					<div width="30" class="top"></div>
					<div width="100%" class="second">
						<div class="left"></div>
						<div class="right"></div>
					</div>
					<div width="100%" class="third">
						<div class="left"></div>
						<div class="right"></div>
					</div>
					<div class="bottom">
						<div class="middle"></div>
					</div>
				</div>
				
				<div class="operator">=</div>
				<div width="30" class="top1"></div>
			</div>

</div> -->


</body>
</html>